<template>
  <div class="box">
    <div class="custom-mount" id="wps" ref="wpsCustomMount"></div>
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, ref, inject, reactive, toRefs, nextTick, watch, watchEffect } from 'vue'
import WebOfficeSDK from '@/utils/static/web-office-sdk-v1.1.19.es.js'
import { useStore } from 'vuex';

export default defineComponent({
    props: {
        // 模版地址
        wpsUrl: {
            type: String,
            default: "",
        },
        mode: {
            type: String,
            default: "",
        },
        shopShow:{
            type: Boolean,
            default: false,
        },
        //以下为书签名具体参考后台红头页面添加红头页面书签说明
        processCode:{
            type: String,
            default: "",
        },
        draftedBy:{
            type: String,
            default: "",
        },
        documentTitleName:{
            type: String,
            default: "",
        },
        documentCompany:{
            type: String,
            default: "",
        },
        recordSet:{
            type: String,
            default: "",
        },
        secretDegree:{
            type: String,
            default: "",
        },
        urgency:{
            type: String,
            default: "",
        },
        limitDate:{
            type: String,
            default: "",
        },
        IssueDate:{
            type: String,
            default: "",
        },
        printNumber:{
            type: String,
            default: "",
        },
        printCopies:{
            type: String,
            default: "",
        },
        mainSendCompany:{
            type: String,
            default: "",
        },
        carbonCopy:{
            type: String,
            default: "",
        },
        draftedCompany:{
            type: String,
            default: "",
        },
        SenddCompany:{
            type: String,
            default: "",
        },
        draftedDepartment:{
            type: String,
            default: "",
        },
        printDepartment:{
            type: String,
            default: "",
        },
        manSendPerson:{
            type: String,
            default: "",
        },
        carbonPerson:{
            type: String,
            default: "",
        },
        reviewerPerson:{
            type: String,
            default: "",
        },
        IssuerPerson:{
            type: String,
            default: "",
        },
        documentType:{
            type: String,
            default: "",
        },
        sendDocumentState:{
            type: String,
            default: "",
        },
        confidentialityPeriod:{
            type: String,
            default: "",
        },
        receiveDocumentState:{
            type: String,
            default: "",
        },
        version:{
            type: String,
            default: "",
        },
        remarks:{
            type: String,
            default: "",
        },
        spare1:{
            type: String,
            default: "",
        },
        spare2:{
            type: String,
            default: "",
        },
        spare3:{
            type: String,
            default: "",
        },
        spare4:{
            type: String,
            default: "",
        },
        spare5:{
            type: String,
            default: "",
        },
    },
    setup(props:any, { emit }) {
        const store = useStore();
        const wpsCustomMount = ref<HTMLElement | null>(null);
        const redwpsCustomMount = ref<HTMLElement | null>(null);
        const data = reactive({
            fileWpsUrl: "",
        })
        onMounted(async () => {
            await nextTick()
            wpsEventAll();
        })
        const wpsEventAll=async()=>{
            let wpsJsSdk: any = WebOfficeSDK.config({
                url: props.wpsUrl?props.wpsUrl:data.fileWpsUrl,
                mode: "nomal",//nomal普通模式，展示所有功能界面.simple极简模式，不显示头部和工具栏
                mount: wpsCustomMount.value,//挂载到页面的显示对象
                cooperUserAttribute: {// 通过 cooperUserAttribute 选项，控制协作用户头像是否显示以及控制用户光标颜色
                    isCooperUsersAvatarVisible: true, // 是否显示协作用户头像
                },
                refreshToken: () => {
                    return Promise.resolve({
                        token: store.getters.tokenObj.token, // 必需：你需要设置的 token
                        timeout: 10 * 60 * 1000, //  必需：token 超时时间，以 10 分钟示例
                    });
                }
            });
            await wpsJsSdk.ready();//等待加载完毕
            const app = wpsJsSdk.Application;
            // 获取文档中所有书签
            let bookmarksAll =await app.ActiveDocument.Bookmarks.Json()
            let bookmarksNameListAll=bookmarksAll?.map((item:any)=>{
                    return item.name
                });
            let bookmarksNameList=bookmarksNameListAll?.map((e:any)=>{
                let bookName:any
                if(e.indexOf("_")===-1){
                    bookName=e
                }else{
                    bookName=e.substring(0,e.indexOf("_"))
                }
                if(bookName=='processCode'){
                    return {
                        name: e,
                        type: 'text',
                        value: props.processCode===null||props.processCode==''||props.processCode=='null'?'[发文字号自动生成]':props.processCode,
                    }
                }else{
                    return {
                        name: e,
                        type: 'text',
                        value: props[bookName]?props[bookName]:`未获取到${bookName}`,
                    }
                }
                
            })
            if(props.shopShow){
                // 执行书签替换
                let isReplaceSuccess =await app.ActiveDocument.Bookmarks.ReplaceBookmark(bookmarksNameList);
                if(isReplaceSuccess){
                    // 触发手动保存
                    const result = await wpsJsSdk.save();
                    let obj={
                        isReplaceSuccess:isReplaceSuccess,
                        result:result
                    }
                    // store.commit('flow/setBookmarks',obj)
                }
            }else{
                // store.commit('flow/setBookmarks',{})
            }
        };
        watch(
            () => props.wpsUrl,
            (n: any, o: any) => {
                data.fileWpsUrl = n
                wpsEventAll();
            },
            {
                deep:true
            }
        )
        watch(
            () => props.shopShow,
            (n: any, o: any) => {
                if(n){
                    wpsEventAll();
                }
            },
            {
                deep:true
            }
        )
        watch(
            () => props.processCode,
            (n: any, o: any) => {
                if(n){
                    wpsEventAll();
                }
            },
            {
                deep:true
            }
        )
        return {
            wpsCustomMount,
            redwpsCustomMount,
            ...toRefs(data)
        }
    }
})
</script>

<style lang="scss" scoped>
.box {
  width: 100%;
  height: 100%;
}

.custom-mount {
  width: 100%;
  height: 100%;
}

.custom-mount3 {
  width: 0%;
  height: 0%;
}
</style>
